<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/vue.min.js"></script>
    <style>
       table#stu{
            width: 100%;
            height: 100%;;
            align-content:center;           
            border: 2px solid black;
        }
        table#stu tr{
            height: 50px;
        }
        table#stu tr td{
            border: 1px solid #877777;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="app">
        <h3 style="color: brown;text-align:center;">学生基本信息管理</h3>
        <hr width="100%"/>
        <br/>
            学号:<input style="width:100px;" v-model="no" type="text" value="">
            姓名:<input style="width:50px;" v-model="name" type="text" value="">
            性别: <select  v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
            生日:<input style="width:60px;"v-model="birth" type="text" value="">
            班级:
            <select  style="width:80px;" v-model="iclass">
                <option value="信息20-1班">信息20-1班</option>
                <option value="信息20-2班">信息20-2班</option>
            </select>
            
        
            住所:<input style="width:100px;"v-model="address" type="text" value="">
            <input @click="addStu()" v-model="xinzeng" type="button" />
            <input  style="width:200px;" v-model="sstxt" type="text"  value="">
            <select   style="width:80px;" v-model="sleop">
                <option v-model="quanbu">全部</option>
                <option v-model="xuehao">按照学号搜索</option>
                <option v-model="xingming">按照姓名搜索</option>
                <option v-model="xingbie">按照性别搜索</option>
                <option v-model="riqi">按照出生年月日搜索</option>
                <option v-model="banji">按照班级搜索</option>
                <option v-model="sushe">按照宿舍位置搜索</option>
            </select>
            <input type="button" value="搜索" @click="searchStu()"/>
            <br></br>
            <table id="stu" cellpadding="0" cellspacing="0">
                <tr>
                    <td>序号</td>
                    <td>学号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>出生年月日</td>
                    <td>班级</td>
                    <td>宿舍位置</td>
                    <td>操作</td>
                </tr>
                <tr v-for="(stu,i) in arrStu_new" :key="stu.no">
                    <td>{{i+1}}</td>
                    <td>{{stu.no}}</td>
                    <td>{{stu.name}}</td>
                    <td>{{stu.sex}}</td>
                    <td>{{stu.birth}}</td>
                    <td>{{stu.iclass}}</td>
                    <td>{{stu.address}}</td>
                    <td>
                        <input @click="delStu(stu.no)" type="button" value="删除" />
                        <input @click="modStu(stu.no)" type="button" value="修改" />
                    </td>
                </tr>
                
            </table>
    </div>
    <script>
        var the_no='';
        var vm =new Vue(
            {
            el:"#app",
            data:{
                    arrStu:[
                        {no:'20210101',
                        name:'王诗雨',
                        sex:'女',
                        birth:'2001-8-6',
                        iclass:'信息20-1班',
                        address:'12号楼'
                        },
                        {no:'20210102',
                        name:'苏俊逸',
                        sex:'男',
                        birth:'2001-8-7',
                        iclass:'信息20-1班',
                        address:'11号楼'
                        },
                        {no:'20210103',
                        name:'王琳欣',
                        sex:'女',
                        birth:'2001-8-8',
                        iclass:'信息20-1班',
                        address:'12号楼'
                        },
                        {no:'20210116',
                        name:'白艳明',
                        sex:'男',
                        birth:'2002-5-6',
                        iclass:'信息20-2班',
                        address:'11号楼'
                        }
                    ],
                    arrStu_new:[
                    {no:'20210101',
                        name:'王诗雨',
                        sex:'女',
                        birth:'2001-8-6',
                        iclass:'信息20-1班',
                        address:'12号楼'
                        },
                        {no:'20210102',
                        name:'苏俊逸',
                        sex:'男',
                        birth:'2001-8-7',
                        iclass:'信息20-1班',
                        address:'11号楼'
                        },
                        {no:'20210103',
                        name:'王琳欣',
                        sex:'女',
                        birth:'2001-8-8',
                        iclass:'信息20-1班',
                        address:'12号楼'
                        },
                        {no:'20210116',
                        name:'白艳明',
                        sex:'男',
                        birth:'2002-5-6',
                        iclass:'信息20-2班',
                        address:'11号楼'
                        }
                    ],
                    sleop:'全部',
                    quanbu:'0',
                    xuhao:'1',
                    xuehao:'2',
                    xingming:'3',
                    xingbie:'4',
                    riqi:'5',
                    banji:'6',
                    sushe:'7',
                        sstxt:"",
                        xinzeng:"新增",
                        no:"",
                        name:"",
                        sex:"",
                        birth:"",
                        iclass:"",
                        address:"",
                },
                methods:
                    {
                        addStu:function()
                        {

                            var isroll=1;
                            var s = 
                            {
                                xh:this.addStu.length+1,
                                no:this.no,
                                name:this.name,
                                sex:this.sex,
                                birth:this.birth,
                                iclass:this.iclass,
                                address:this.address
                            };
                        if(this.xinzeng=="新增")
                        {
                            if(!(this.no&&this.name&&this.birth&&this.address))
                            {
                                alert("学号或姓名或生日或地址不能为空!");
                                this.no="";
                                this.name = "";
                                this.sex = "";
                                this.birth = "";
                                this.iclass = "";
                                this.address = "";
                            }
                            else {
                                    for(var i=0; i<this.arrStu.length;i++)
                                    {
                                        if(this.arrStu[i].no==this.no)
                                        {
                                            isroll=0;
                                            break;
                                        }
                                      
                                    }
                                        if(isroll==0)
                                            {
                                            alert("学号不能重复!");
                                            this.no="";
                                            this.name = "";
                                            this.sex = "";
                                            this.birth = "";
                                            this.iclass = "";
                                            this.address = "";
                                            }
                                        else
                                            {
                                                this.arrStu.push(s);
                                            }
                                }
                            
                        }
                        else if(this.xinzeng=="保存")
                        {
                            for(var i=0; i<this.arrStu.length;i++)
                                {
                                    if(this.arrStu[i].no==the_no)
                                    {
                                        var the_i=i;
                                        if(!(this.no&&this.name&&this.birth&&this.address))
                                            {
                                                alert("学号或姓名或生日或地址不能为空!");
                                                this.no="";
                                                this.name = "";
                                                this.sex = "";
                                                this.birth = "";
                                                this.iclass = "";
                                                this.address = "";
                                            }
                                            else {
                                                for(var i=0; i<this.arrStu.length;i++)
                                                {
                                                    if(this.arrStu[i].no==this.no&&this.no!=the_no)
                                                    {
                                                        isroll=0;
                                                        break;
                                                    }
                                        
                                                }
                                                if(isroll==0)
                                                    {
                                                    alert("学号不能重复!");
                                                    this.no="";
                                                    this.name = "";
                                                    this.sex = "";
                                                    this.birth = "";
                                                    this.iclass = "";
                                                    this.address = "";
                                                    }
                                                else
                                                    {
                                                        this.arrStu[the_i].no=s.no;
                                                        this.arrStu[the_i].name=s.name;
                                                        this.arrStu[the_i].sex=s.sex;
                                                        this.arrStu[the_i].birth=s.birth;
                                                        this.arrStu[the_i].iclass=s.iclass;
                                                        this.arrStu[the_i].address=s.address;
                                                    }
                                }
                                        this.xinzeng="新增";
                                        break;
                                    }
                                }
                        }
                                this.no="";
                                this.name = "";
                                this.sex = "";
                                this.birth = "";
                                this.iclass = "";
                                this.address = "";
                                this.sleop="全部";
                            this.searchStu();
                    },                            
                        delStu(_no)
                        {
                            for(var i=0;i<this.arrStu.length;i++)
                            {
                                if(this.arrStu[i].no==_no)
                                this.arrStu.splice(i,1);
                            }
                            this.sleop="全部";
                            this.searchStu();
                        },
                        modStu(_no)
                        {
                            the_no=_no;
                            this.xinzeng="保存";
                            for(var i=0; i<this.arrStu.length;i++)
                            {
                                if(this.arrStu[i].no==_no)
                                {
                                    this.no=this.arrStu[i].no;
                                    this.name=this.arrStu[i].name;
                                    this.sex=this.arrStu[i].sex;
                                    this.birth=this.arrStu[i].birth;
                                    this.iclass=this.arrStu[i].iclass;
                                    this.address=this.arrStu[i].address;
                                    break;
                                }
                            }
                            this.sleop="全部";
                            this.searchStu();
                        },
                        searchStu()
                        {                
                            if(this.sleop=="全部")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                                 var isroll=1;

                                for(var i=0; i<this.arrStu.length;i++)
                                {
                                    var s1={
                                                xh:i+1,
                                                no:this.arrStu[i].no, 
                                                name:this.arrStu[i].name, 
                                                sex:this.arrStu[i].sex,
                                                birth:this.arrStu[i].birth,
                                                iclass:this.arrStu[i].iclass,
                                                address:this.arrStu[i].address 
                                            }
                                    for(var j=0; j<this.arrStu_new.length;j++)
                                    {
                                        
                                        
                                        if(this.arrStu[i].no==this.arrStu_new[j].no)
                                        {
                                            isroll=0;
                                        } 
                                    }
                                        if(isroll==1){
                                            this.arrStu_new.push(s1);
                                            isroll==1;
                                        } 


                                }
                              for(var i=0;i<this.arrStu_new.length;i++)
                                {
                                    if(!this.arrStu_new[i].no)
                                    this.arrStu_new.splice(i,1);
                                } 
                            }
                            else if(this.sleop=="按照学号搜索")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                               
                                alert(this.sleop);
                                 var isroll=1;

                                for(var i=0; i<this.arrStu.length;i++)
                                {
                                    var s1={
                                                xh:i+1,
                                                no:this.arrStu[i].no, 
                                                name:this.arrStu[i].name, 
                                                sex:this.arrStu[i].sex,
                                                birth:this.arrStu[i].birth,
                                                iclass:this.arrStu[i].iclass,
                                                address:this.arrStu[i].address 
                                            }
                                    for(var j=0; j<this.arrStu_new.length;j++)
                                    {
                                        
                                        
                                        if(this.arrStu[i].no==this.arrStu_new[j].no)
                                        {
                                            isroll=0;
                                        } 
                                    }
                                        if(isroll==1&&this.arrStu[i].no.match(this.sstxt)){
                                            this.arrStu_new.push(s1);
                                            isroll==1;
                                        } 


                                }
                              for(var i=0;i<this.arrStu_new.length;i++)
                                {
                                    if(!this.arrStu_new[i].no)
                                    this.arrStu_new.splice(i,1);
                                }  
                                
                            }
                            else if(this.sleop=="按照姓名搜索")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                               
                               alert(this.sleop);
                                var isroll=1;

                               for(var i=0; i<this.arrStu.length;i++)
                               {
                                   var s1={
                                               xh:i+1,
                                               no:this.arrStu[i].no, 
                                               name:this.arrStu[i].name, 
                                               sex:this.arrStu[i].sex,
                                               birth:this.arrStu[i].birth,
                                               iclass:this.arrStu[i].iclass,
                                               address:this.arrStu[i].address 
                                           }
                                   for(var j=0; j<this.arrStu_new.length;j++)
                                   {
                                       
                                       
                                       if(this.arrStu[i].no==this.arrStu_new[j].no)
                                       {
                                           isroll=0;
                                       } 
                                   }
                                       if(isroll==1&&this.arrStu[i].name.match(this.sstxt)){
                                           this.arrStu_new.push(s1);
                                           isroll==1;
                                       } 


                               }
                             for(var i=0;i<this.arrStu_new.length;i++)
                               {
                                   if(!this.arrStu_new[i].no)
                                   this.arrStu_new.splice(i,1);
                               }  
                            }
                            else if(this.sleop=="按照性别搜索")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                               
                               alert(this.sleop);
                                var isroll=1;

                               for(var i=0; i<this.arrStu.length;i++)
                               {
                                   var s1={
                                               xh:i+1,
                                               no:this.arrStu[i].no, 
                                               name:this.arrStu[i].name, 
                                               sex:this.arrStu[i].sex,
                                               birth:this.arrStu[i].birth,
                                               iclass:this.arrStu[i].iclass,
                                               address:this.arrStu[i].address 
                                           }
                                   for(var j=0; j<this.arrStu_new.length;j++)
                                   {
                                       
                                       
                                       if(this.arrStu[i].no==this.arrStu_new[j].no)
                                       {
                                           isroll=0;
                                       } 
                                   }
                                       if(isroll==1&&this.arrStu[i].sex==this.sstxt){
                                           this.arrStu_new.push(s1);
                                           isroll==1;
                                       } 


                               }
                             for(var i=0;i<this.arrStu_new.length;i++)
                               {
                                   if(!this.arrStu_new[i].no)
                                   this.arrStu_new.splice(i,1);
                               }  
                            }
                            else if(this.sleop=="按照出生年月日搜索")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                               
                               alert(this.sleop);
                                var isroll=1;

                               for(var i=0; i<this.arrStu.length;i++)
                               {
                                   var s1={
                                               xh:i+1,
                                               no:this.arrStu[i].no, 
                                               name:this.arrStu[i].name, 
                                               sex:this.arrStu[i].sex,
                                               birth:this.arrStu[i].birth,
                                               iclass:this.arrStu[i].iclass,
                                               address:this.arrStu[i].address 
                                           }
                                   for(var j=0; j<this.arrStu_new.length;j++)
                                   {
                                       
                                       
                                       if(this.arrStu[i].no==this.arrStu_new[j].no)
                                       {
                                           isroll=0;
                                       } 
                                   }
                                       if(isroll==1&&this.arrStu[i].birth.match(this.sstxt)){
                                           this.arrStu_new.push(s1);
                                           isroll==1;
                                       } 


                               }
                             for(var i=0;i<this.arrStu_new.length;i++)
                               {
                                   if(!this.arrStu_new[i].no)
                                   this.arrStu_new.splice(i,1);
                               }  
                            }
                            else if(this.sleop=="按照班级搜索")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                               
                               alert(this.sleop);
                                var isroll=1;

                               for(var i=0; i<this.arrStu.length;i++)
                               {
                                   var s1={
                                               xh:i+1,
                                               no:this.arrStu[i].no, 
                                               name:this.arrStu[i].name, 
                                               sex:this.arrStu[i].sex,
                                               birth:this.arrStu[i].birth,
                                               iclass:this.arrStu[i].iclass,
                                               address:this.arrStu[i].address 
                                           }
                                   for(var j=0; j<this.arrStu_new.length;j++)
                                   {
                                       
                                       
                                       if(this.arrStu[i].no==this.arrStu_new[j].no)
                                       {
                                           isroll=0;
                                       } 
                                   }
                                       if(isroll==1&&this.arrStu[i].iclass.match(this.sstxt)){
                                           this.arrStu_new.push(s1);
                                           isroll==1;
                                       } 


                               }
                             for(var i=0;i<this.arrStu_new.length;i++)
                               {
                                   if(!this.arrStu_new[i].no)
                                   this.arrStu_new.splice(i,1);
                               }  
                            }
                            else if(this.sleop=="按照宿舍位置搜索")
                            {
                                this.arrStu_new.splice(i,this.arrStu_new.length);
                               
                               alert(this.sleop);
                                var isroll=1;

                               for(var i=0; i<this.arrStu.length;i++)
                               {
                                   var s1={
                                               xh:i+1,
                                               no:this.arrStu[i].no, 
                                               name:this.arrStu[i].name, 
                                               sex:this.arrStu[i].sex,
                                               birth:this.arrStu[i].birth,
                                               iclass:this.arrStu[i].iclass,
                                               address:this.arrStu[i].address 
                                           }
                                   for(var j=0; j<this.arrStu_new.length;j++)
                                   {
                                       
                                       
                                       if(this.arrStu[i].no==this.arrStu_new[j].no)
                                       {
                                           isroll=0;
                                       } 
                                   }
                                       if(isroll==1&&this.arrStu[i].address.match(this.sstxt)){
                                           this.arrStu_new.push(s1);
                                           isroll==1;
                                       } 


                               }
                             for(var i=0;i<this.arrStu_new.length;i++)
                               {
                                   if(!this.arrStu_new[i].no)
                                   this.arrStu_new.splice(i,1);
                               }  
                            }
                        }
                    },
                },
        );
    </script>
</body>

</html>